<template>
   <view class="uv-page">
      <view class="uv-page__item">
         <text class="uv-page__item__title first">主色调</text>
         <view class="uv-page__item__color-box">
            <view class="uv-page__item__color-box__item" style="background-color: #3c9cff">
               <text class="uv-page__item__color-box__item__title">Primary</text>
               <text class="uv-page__item__color-box__item__value">#3c9cff</text>
            </view>
            <view class="uv-page__item__color-box__item" style="background-color: #398ade">
               <text class="uv-page__item__color-box__item__title">Dark</text>
               <text class="uv-page__item__color-box__item__value">#398ade</text>
            </view>
            <view class="uv-page__item__color-box__item" style="background-color: #9acafc">
               <text class="uv-page__item__color-box__item__title">Disabled</text>
               <text class="uv-page__item__color-box__item__value">#9acafc</text>
            </view>
            <view class="uv-page__item__color-box__item" style="background-color: #ecf5ff">
               <text class="uv-page__item__color-box__item__title uv-tips-color">Light</text>
               <text class="uv-page__item__color-box__item__value uv-tips-color">#ecf5ff</text>
            </view>
         </view>
      </view>
      <view class="uv-page__item">
         <text class="uv-page__item__title">Error</text>
         <view class="uv-page__item__color-box">
            <view class="uv-page__item__color-box__item" style="background-color: #f56c6c">
               <text class="uv-page__item__color-box__item__title">Error</text>
               <text class="uv-page__item__color-box__item__value">#f56c6c</text>
            </view>
            <view class="uv-page__item__color-box__item" style="background-color: #e45656">
               <text class="uv-page__item__color-box__item__title">Dark</text>
               <text class="uv-page__item__color-box__item__value">#e45656</text>
            </view>
            <view class="uv-page__item__color-box__item" style="background-color: #f7b2b2">
               <text class="uv-page__item__color-box__item__title">Disabled</text>
               <text class="uv-page__item__color-box__item__value">#f7b2b2</text>
            </view>
            <view class="uv-page__item__color-box__item" style="background-color: #fef0f0">
               <text class="uv-page__item__color-box__item__title uv-tips-color">Light</text>
               <text class="uv-page__item__color-box__item__value uv-tips-color">#fef0f0</text>
            </view>
         </view>
      </view>
      <view class="uv-page__item">
         <text class="uv-page__item__title">Warning</text>
         <view class="uv-page__item__color-box">
            <view class="uv-page__item__color-box__item" style="background-color: #f9ae3d">
               <text class="uv-page__item__color-box__item__title">Warning</text>
               <text class="uv-page__item__color-box__item__value">#f9ae3d</text>
            </view>
            <view class="uv-page__item__color-box__item" style="background-color: #f1a532">
               <text class="uv-page__item__color-box__item__title">Dark</text>
               <text class="uv-page__item__color-box__item__value">#f1a532</text>
            </view>
            <view class="uv-page__item__color-box__item" style="background-color: #f9d39b">
               <text class="uv-page__item__color-box__item__title">Disabled</text>
               <text class="uv-page__item__color-box__item__value">#f9d39b</text>
            </view>
            <view class="uv-page__item__color-box__item" style="background-color: #fdf6ec">
               <text class="uv-page__item__color-box__item__title uv-tips-color">Light</text>
               <text class="uv-page__item__color-box__item__value uv-tips-color">#fdf6ec</text>
            </view>
         </view>
      </view>
      <view class="uv-page__item">
         <text class="uv-page__item__title">Info</text>
         <view class="uv-page__item__color-box">
            <view class="uv-page__item__color-box__item" style="background-color: #909399">
               <text class="uv-page__item__color-box__item__title">Info</text>
               <text class="uv-page__item__color-box__item__value">#909399</text>
            </view>
            <view class="uv-page__item__color-box__item" style="background-color: #767a82">
               <text class="uv-page__item__color-box__item__title">Dark</text>
               <text class="uv-page__item__color-box__item__value">#767a82</text>
            </view>
            <view class="uv-page__item__color-box__item" style="background-color: #c4c6c9">
               <text class="uv-page__item__color-box__item__title">Disabled</text>
               <text class="uv-page__item__color-box__item__value">#c4c6c9</text>
            </view>
            <view class="uv-page__item__color-box__item" style="background-color: #f4f4f5">
               <text class="uv-page__item__color-box__item__title uv-tips-color">Light</text>
               <text class="uv-page__item__color-box__item__value uv-tips-color">#f4f4f5</text>
            </view>
         </view>
      </view>
      <view class="uv-page__item">
         <text class="uv-page__item__title">Success</text>
         <view class="uv-page__item__color-box">
            <view class="uv-page__item__color-box__item" style="background-color: #5ac725">
               <text class="uv-page__item__color-box__item__title">Success</text>
               <text class="uv-page__item__color-box__item__value">#5ac725</text>
            </view>
            <view class="uv-page__item__color-box__item" style="background-color: #53c21d">
               <text class="uv-page__item__color-box__item__title">Dark</text>
               <text class="uv-page__item__color-box__item__value">#53c21d</text>
            </view>
            <view class="uv-page__item__color-box__item" style="background-color: #a9e08f">
               <text class="uv-page__item__color-box__item__title">Disabled</text>
               <text class="uv-page__item__color-box__item__value">#a9e08f</text>
            </view>
            <view class="uv-page__item__color-box__item" style="background-color: #f5fff0">
               <text class="uv-page__item__color-box__item__title uv-tips-color">Light</text>
               <text class="uv-page__item__color-box__item__value uv-tips-color">#f5fff0</text>
            </view>
         </view>
      </view>
      <view class="uv-page__item">
         <text class="uv-page__item__title">文字颜色</text>
         <view class="uv-page__item__color-box">
            <view class="uv-page__item__color-box__item" style="background-color: #303133">
               <text class="uv-page__item__color-box__item__title">主要文字</text>
               <text class="uv-page__item__color-box__item__value">#303133</text>
            </view>
            <view class="uv-page__item__color-box__item" style="background-color: #606266">
               <text class="uv-page__item__color-box__item__title">常规文字</text>
               <text class="uv-page__item__color-box__item__value">#606266</text>
            </view>
            <view class="uv-page__item__color-box__item" style="background-color: #909399">
               <text class="uv-page__item__color-box__item__title">次要文字</text>
               <text class="uv-page__item__color-box__item__value">#909399</text>
            </view>
            <view class="uv-page__item__color-box__item" style="background-color: #c0c4cc">
               <text class="uv-page__item__color-box__item__title">占位文字</text>
               <text class="uv-page__item__color-box__item__value">#c0c4cc</text>
            </view>
         </view>
      </view>
      <view class="uv-page__item">
         <text class="uv-page__item__title">边框颜色</text>
         <view class="uv-page__item__color-box">
            <view class="uv-page__item__color-box__item" style="background-color: #9a9998">
               <text class="uv-page__item__color-box__item__title">一级边框</text>
               <text class="uv-page__item__color-box__item__value">#9a9998</text>
            </view>
            <view class="uv-page__item__color-box__item" style="background-color: #b4b3b1">
               <text class="uv-page__item__color-box__item__title">二级边框</text>
               <text class="uv-page__item__color-box__item__value">#b4b3b1</text>
            </view>
            <view class="uv-page__item__color-box__item" style="background-color: #ceccca">
               <text class="uv-page__item__color-box__item__title">三级边框</text>
               <text class="uv-page__item__color-box__item__value">#ceccca</text>
            </view>
            <view class="uv-page__item__color-box__item" style="background-color: #e7e6e4">
               <text class="uv-page__item__color-box__item__title uv-tips-color">四级边框</text>
               <text class="uv-page__item__color-box__item__value uv-tips-color">#e7e6e4</text>
            </view>
         </view>
      </view>
      <view class="uv-page__item">
         <text class="uv-page__item__title">背景颜色</text>
         <view class="uv-page__item__color-box">
            <view class="uv-page__item__color-box__item" style="background-color: #f3f4f6">
               <text class="uv-page__item__color-box__item__title uv-tips-color">背景颜色</text>
               <text class="uv-page__item__color-box__item__value uv-tips-color">#f3f4f6</text>
            </view>
         </view>
      </view>
   </view>
</template>

<style lang="scss" scoped>
.uv-page {
   padding: 15px;

   &__item {
      &__title {
         display: block;
         font-size: 15px;
         color: $uv-content-color;
         margin-top: 16px;
         margin-bottom: 4px;
      }

      .first {
         margin-top: 0;
      }

      &__color-box {
         @include flex;
         justify-content: space-between;

         &__item {
            width: 160rpx;
            @include flex(column);
            align-items: center;
            justify-content: center;
            padding: 5px 0;
            border-radius: 3px;

            &__title {
               font-size: 13px;
               color: #fff;
            }

            &__value {
               font-size: 14px;
               color: #fff;
            }
         }
      }
   }
}

.uv-tips-color {
   color: $uv-tips-color;
}
</style>
